<template>
  <div v-show="!isChildView">

      <div >
        <div class="one">
      <div class="“left">
        <h3>未处理</h3>
        <div>0</div>
      </div>
      <div class="right">
        <el-button @click="router.push('/fanwei')">打卡范围</el-button>
        <el-button type="primary" @click="shezhi">设置</el-button>
      </div>
    </div>
    <div class="two">
      <h2>部门：</h2>
      <el-checkbox-group class="right" v-model="departmentIds">
        <el-checkbox
          v-for="k in departmentList"
          :key="k.id"
          :label="k.name"
          :value="k.id"
        />
      </el-checkbox-group>
    </div>
    <div class="tree">    
      <el-table v-loading="isListLoading" :data="list" style="width: 100%">
        <el-table-column prop="id" label="序号" />
        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="workNumber" label="工号" />
        <el-table-column prop="departmentName" label="部门" />
        <el-table-column prop="mobile" label="手机" />
        <el-table-column v-for="(k, index) in days" :key="index" prop="" :label="k.date">
          <template #default="scope">
            <!--  -->
            <el-popover
              placement="top"
              :width="400"
              trigger="hover"
            >
              <div style="height:60px;line-height:60px;border-bottom:1px solid #e0e0e0;text-align:center;">
                
               {{scope.row.username +
                '-' +
                scope.row.attendanceRecord[index].day +
                '-考勤记录'}} 
              
              </div>
              <div style="height:50px;line-height:40px;">上班打卡时间：{{ scope.row.attendanceRecord[index].adtInTime }}</div>
              <div style="height:50px;line-height:40px;">上班打卡地点：-</div>
              <div style="height:50px;line-height:50px;">下班打卡时间：{{ scope.row.attendanceRecord[index].adtOutTime }}</div>
              <div style="height:50px;line-height:40px;">下班打卡地点：-</div>
              <!-- 在表格中显示的文字 -->
              <template #reference>
                <div @click="getAdtStatu(scope.row.userId,scope.row.attendanceRecord[index].day,scope.row.attendanceRecord[index].adtStatu,scope.row.departmentId)">
                  <div class="tem"
                  v-show="scope.row.attendanceRecord[index].adtStatu == 2"
                  style="color: red"
                  >旷工</div class="tem"
                >
                <div class="tem"
                  v-show="scope.row.attendanceRecord[index].adtStatu == 1"
                  style="color: green"
                  >正常</div class="tem"
                >
                <div class="tem"
                  v-show="scope.row.attendanceRecord[index].adtStatu == 22"
                  style="color: rgb(144, 147, 153)"
                  >休息</div class="tem"
                >
                <div class="tem"
                  v-show="scope.row.attendanceRecord[index].adtStatu == 3"
                  style="color: coral"
                  >迟到</div class="tem"
                >
                <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 4">早退</div class="tem">
                <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 5">外出</div class="tem">
                <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 6">出差</div class="tem">
                <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 7">年假</div class="tem">
                <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 8">事假</div class="tem">
                <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 9">病假</div class="tem">
                <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 10">婚嫁</div class="tem">
                <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 11">丧家</div class="tem">
                <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 12">产假</div class="tem">
                <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 13">奖励产假</div class="tem">
                <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 14">陪产假</div class="tem">
                <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 15">探亲假</div class="tem">
                <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 16">工伤假</div class="tem">
                <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 17">调休假</div class="tem">
                <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 18" >产检假</div class="tem">
                <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 19">流产假</div class="tem" >
                <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 20">长期病假</div class="tem">
                <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 21">补签</div class="tem">
                <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 99">-</div class="tem">
                </div>
      
              </template>
            </el-popover>
            <!--  -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-box">
        <el-pagination
              v-model:current-page="page"
              layout="prev, pager, next"
              :total="total"
            />
      </div>
 
    </div>
      </div>

  </div>
  <RouterView v-show="isChildView"></RouterView>
  <!-- //##进行设置的弹框 -->
  <PopUp ref="shezhiRef" width="800" title="设置" :confirm="confirm" :xiao="xiao">
    <template #cont>
      <div class="title">
        <div @click="active = 1" :class="active == 1 ? 'active tab' : 'tab'">
          出勤设置
        </div>
        <div @click="active = 2" :class="active == 2 ? 'active tab' : 'tab'">
          请假设置
        </div>
        <div @click="active = 3" :class="active == 3 ? 'active tab' : 'tab'">
          扣款设置
        </div>
        <div @click="active = 4" :class="active == 4 ? 'active tab' : 'tab'">
          加班设置
        </div>
      </div>

      <div class="content">
        <div v-show="active == 1">
          <el-form
            ref="setTimeFormRef"
            style="max-width: 500px"
            :model="setTimeForm"
            label-width="auto"
            class="demo-dynamic"
          >
            <el-form-item
              prop="departmentId"
              label="部门"
              :rules="[
                {
                  required: true,
                  message: '请选择部门',
                  trigger: 'blur',
                },
              ]"
            >
              <el-select
                v-model="setTimeForm.departmentId"
                placeholder="选择部门"
                size="large"
                style="width: 240px"
                @change="timeDep"
              >
                <el-option
                  v-for="item in departmentList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="time" label="出勤时间">
              <div>
                <el-time-picker
                  value-format="hh:mm:ss"
                  style="width: 200px"
                  v-model="setTimeForm.time.morningStartTime"
                  placeholder="早上班时间"
                />-
                <el-time-picker
                  value-format="hh:mm:ss"
                  style="width: 200px"
                  v-model="setTimeForm.time.morningEndTime"
                  placeholder="早下班时间"
                /><br />
                <el-time-picker
                  value-format="hh:mm:ss"
                  style="width: 200px"
                  v-model="setTimeForm.time.afternoonStartTime"
                  placeholder="午上班时间"
                />-
                <el-time-picker
                  value-format="HH:mm:ss"
                  style="width: 200px"
                  v-model="setTimeForm.time.afternoonEndTime"
                  placeholder="午下班时间"
                />
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div v-show="active == 2">
          <el-form
            ref="setQingjiaFormRef"
            style="max-width: 500px"
            :model="setQingjiaForm"
            label-width="auto"
            class="demo-dynamic"
          >
            <el-form-item
              prop="departmentId"
              label="部门"
              :rules="[
                {
                  required: true,
                  message: '请选择部门',
                  trigger: 'blur',
                },
              ]"
            >
              <el-select
                v-model="setQingjiaForm.departmentId"
                placeholder="选择部门:"
                size="large"
                style="width: 240px"
                @change="QingjiaDep"
              >
                <el-option
                  v-for="item in departmentList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="type" label="假期类型:">
              <div>
                <el-table :data="type" style="width: 100%">
                  <el-table-column prop="leaveType" width="100" label="假期名称">
                    <template #default="scope">
                      <span v-if="scope.row.leaveType == 60000">年假</span>
                      <span v-if="scope.row.leaveType == 60100">事假</span>
                      <span v-if="scope.row.leaveType == 60200">病假</span>
                      <span v-if="scope.row.leaveType == 60300">婚假</span>
                      <span v-if="scope.row.leaveType == 60400">丧家</span>
                      <span v-if="scope.row.leaveType == 60500">产假</span>
                      <span v-if="scope.row.leaveType == 60600">奖励产假</span>
                      <span v-if="scope.row.leaveType == 60700">陪产假</span>
                      <span v-if="scope.row.leaveType == 60800">探亲假</span>
                      <span v-if="scope.row.leaveType == 60900">工伤假</span>
                      <span v-if="scope.row.leaveType == 61000">调休假</span>
                      <span v-if="scope.row.leaveType == 61100">产检假</span>
                      <span v-if="scope.row.leaveType == 61200">流产假</span>
                      <span v-if="scope.row.leaveType == 61300">长期病假</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="isEnable" width="100" label="是否禁用">
                    <template #default="scope">
                      <el-switch
                        v-model="scope.row.isEnable"
                        :active-value="1"
                        :inactive-value="0"
                      />
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div v-show="active == 3">
          <el-form
            ref="koukuanFormRef"
            style="max-width: 500px"
            :model="setKoukuanForm"
            label-width="auto"
            class="demo-dynamic"
          >
            <el-form-item
              prop="departmentId"
              label="部门"
              :rules="[
                {
                  required: true,
                  message: '请选择部门',
                  trigger: 'blur',
                },
              ]"
            >
              <el-select
                v-model="setKoukuanForm.departmentId"
                placeholder="选择部门"
                size="large"
                style="width: 240px"
                @change="koukuanDep"
              >
                <el-option
                  v-for="item in departmentList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-form>
          <div>
            <div v-for="(k, index) in koukuanList" :key="k.id">
              <div v-if="index == 0 || index == 1" class="it">
                <div class="on">
                  <span>{{ k.dedTypeCode == 51000 ? "迟到" : "早退" }}扣款</span>
                  <el-switch v-model="k.isEnable" :active-value="1" :inactive-value="0" />
                </div>
                <div class="tw">
                  <span> {{ k.dedTypeCode == 51000 ? "迟到" : "早退" }}小于等于</span>
                  <el-input v-model="k.periodLowerLimit" style="width: 50px" />分钟
                </div>
                <div class="tre">
                  {{ k.dedTypeCode == 51000 ? "迟到" : "早退" }}小于等于<el-input
                    v-model="k.timesLowerLimit"
                    style="width: 50px"
                  />次，每次扣款
                  <el-input v-model="k.dedAmonutLowerLimit" style="width: 50px" />元
                </div>
                <div class="tre">
                  {{ k.dedTypeCode == 51000 ? "迟到" : "早退" }}大于等于<el-input
                    v-model="k.timesUpperLimit"
                    style="width: 50px"
                  />次，每次扣款
                  <el-input v-model="k.dedAmonutUpperLimit" style="width: 50px" />元
                </div>
                <div class="tw">
                  {{ k.dedTypeCode == 51000 ? "迟到" : "早退" }}大于<el-input
                    v-model="k.periodUpperLimit"
                    style="width: 50px"
                  />分钟
                </div>
                <div class="tre">
                  <!-- 大于多少时间按照矿工算 -->
                  {{ k.dedTypeCode == 51000 ? "迟到" : "早退" }}大于<el-input
                    v-model="k.absenceTimesUpperLimt"
                    style="width: 50px"
                  />次，每次旷工<el-input v-model="k.absenceDays" style="width: 50px" />
                </div>
              </div>
              <div v-if="index == 2" class="it">
                <div class="on">
                  <span>矿工扣款</span>
                  <el-switch v-model="k.isEnable" :active-value="1" :inactive-value="0" />
                </div>
                <div class="tw">
                  矿工扣款大于<el-input
                    v-model="k.fineSalaryMultiples"
                    style="width: 50px"
                  />倍工资处罚
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-show="active == 4">
          <el-form
            ref="jiaBanFormRef"
            :model="setJiaBanForm"
            label-width="auto"
            class="demo-dynamic"
          >
            <el-form-item
              prop="departmentId"
              label="部门"
              :rules="[
                {
                  required: true,
                  message: '请选择部门',
                  trigger: 'blur',
                },
              ]"
            >
              <el-select
                v-model="setJiaBanForm.departmentId"
                placeholder="选择部门"
                size="large"
                style="width: 240px"
                @change="jiaBanDep"
              >
                <el-option
                  v-for="item in departmentList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <div>
              <div>
                <h3>加班规则：</h3>
                <div
                  v-for="k in extraDutyRuleList"
                  style="display: flex; justify-content: space-between"
                  class="q"
                >
                  <div>
                    <el-switch
                      v-model="k.isEnable"
                      :active-value="1"
                      :inactive-value="0"
                    />
                    <span>{{ k.rule }}</span>
                  </div>
                  <div class="">
                    <el-checkbox
                      v-model="k.isTimeOff"
                      true-value="1"
                      false-value="0"
                      label="调休假"
                      size="large"
                    />
                    <el-time-select
                      v-model="k.ruleStartTime"
                      style="width: 120px"
                      start="01:00"
                      step="00:15"
                      end="23:45"
                      placeholder="Select time"
                      :disabled="k.isTimeOff == 0"
                    />
                    <el-time-select
                      v-model="k.ruleEndTime"
                      style="width: 120px"
                      start="01:00"
                      step="00:15"
                      end="23:00"
                      placeholder="Select time"
                      :disabled="k.isTimeOff == 0"
                    />
                  </div>
                </div>
              </div>
              <div>
                <h3>打卡验证：</h3>
                <div class="q">
                  <el-switch
                    v-model="extraDutyConfig.isClock"
                    :active-value="1"
                    :inactive-value="0"
                  />加班需要有打卡记录
                </div>
              </div>
              <div>
                <h3>
                  开启补偿：<el-switch
                    v-model="extraDutyConfig.isCompensationint"
                    :active-value="1"
                    :inactive-value="0"
                  />
                </h3>
              </div>
              <div>
                <el-form-item
                  prop="latestEffectDate"
                  :rules="[
                    {
                      required: true,
                      message: '请设置最晚日期',
                      trigger: 'blur',
                    },
                  ]"
                  style="font-size: 25px; font-size: 700"
                  label="调休假设置："
                >
                  最晚有效期：次年
                  <el-date-picker
                    v-model="dayOffConfigs.latestEffectDate"
                    type="date"
                    placeholder="设置日期"
                    value-format="MM-DD"
                    format="MM-DD"
                    @chenge="geTlatest"
                    style="width: 120px"
                  />
                </el-form-item>
                <div class="w">
                  请假最小单位
                  <el-input v-model="dayOffConfigs.unit" style="width: 50px" />天
                </div>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </template>
  </PopUp>
  <PopUp ref="statusRef" width="500" :title="day+' （实际工作日考勤方案）'"
  :confirm="statusConfirm"
  :xiao="statusXiao"
  >
    <template #cont>
      <div>
        <el-radio-group v-model="userAdtStatu">
          <el-radio v-for="(k) in adtStatuList" :key="k.departmentId" :value="k.departmentId">
            {{k.adtStatu}}
          </el-radio>
        </el-radio-group>
      </div>
    </template>
  </PopUp>
  <!-- 修改状态的弹框 -->
  
</template>

<script setup>
import { ref, onMounted, watch, watchEffect, toRefs, toRef } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import axios from "@/utils/request";
import PopUp from "@/components/popUp.vue";
import Loading from '@/components/loading.vue'

let isListLoading = ref(false)
let router = useRouter();
let route = useRoute();
let departmentList = ref([]); //部门列表
let departmentIds = ref([]); //选中部门列表的id
let list = ref([]);
let page = ref(1);
let pageSize = ref(10);
let total = ref();
let days = ref([]);
let isChildView = ref(false);
let shezhiRef = ref(null); //弹框的实例
let active = ref(1);
// let departmentSelectId = ref(); //出勤时间设置的id
// !考勤时间
let companyId = ref(); //企业id
let setTimeForm = ref({
  departmentId: 1, //出勤时间设置的id
  time: {
    morningStartTime: "",
    morningEndTime: "",
    afternoonStartTime: "",
    afternoonEndTime: "",
  },
}); //出勤时间设置的表单
let setTimeFormRef = ref(null); //出勤时间的节点（实例）
// !请假
let setQingjiaFormRef = ref(null); //请假设置的节点（实例）
let setQingjiaForm = ref({
  departmentId: 1, //出勤时间设置的id
}); //请假使用的表单
let type = ref([]);
// !扣款
let setKoukuanForm = ref({
  departmentId: 1, //扣款部门设置的id
});
let koukuanFormRef = ref(null);
let koukuanList = ref([]);
//!加班
let setJiaBanForm = ref({
  departmentId: 1, //加班部门设置的id
  latestEffectDate: "", //最新的生效日期
});
let jiaBanFormRef = ref(null);
let extraDutyRuleList = ref([]); //加班规则
let dayOffConfigs = ref({}); //调休假
let extraDutyConfig = ref({}); //其他加班打卡
let userId = ref()   //查询的用户的id 
let adtStatuList = ref([])  //当前点击用户的有的假的列表
let day = ref('')
let userAdtStatu = ref()
let statusRef = ref(null)
let departmentId = ref()
function geTlatest(val) {
  setJiaBanForm.value.latestEffectDate = val;
}


// !#############################################################################################################
// ?取消事件
function statusXiao() {
  statusRef.value.close()
}
// ?弹框的提交事件
function statusConfirm(){
  axios.put(`/attendances/${userId.value}`,{
    userId:userId.value,
    day:day.value,
    adtStatu:userAdtStatu.value,
    departmentId:departmentId.value
  }).then(res=>{
    if(res.success){
      statusRef.value.close()
      ElMessage.success(res.message)
      getList()
    }else{
      ElMessage.success(res.message)
      
    }

  })
}
// ?查询用户考勤状态
function getAdtStatu(id,date,status,deparId){
  userId.value = id  //查询的用户的id
  day.value = date
  userAdtStatu.value = status.toString()
  departmentId.value = deparId
  // console.log(userAdtStatu.value);
  axios.get(`/attendances/adtStatu/list`,{params:{userId:id}}).then(res=>{
    // console.log(res);
    if(res.success){   //这是考勤的那个页面的列表
      adtStatuList.value = res.data.map(k=>{
        return {
          adtStatu:Object.values(k)[0],
          departmentId:Object.keys(k)[0]
        }
      })
      statusRef.value.open()
    }
  })
}


// 加班下拉的改变
function jiaBanDep(val) {
  axios.get("/cfg/extDuty/item", { params: { departmentId: val } }).then((res) => {
    if (res.success) {
      extraDutyRuleList.value = res.data.extraDutyRuleList;
      dayOffConfigs.value = res.data.dayOffConfigs;
      extraDutyConfig.value = res.data.extraDutyConfig;
    }
  });
}

// 扣款的下拉改变
function koukuanDep(val) {
  axios.get("/cfg/ded/list", { params: { departmentId: val } }).then((res) => {
    if (res.success) {
      koukuanList.value = res.data;
    }
  });
}

// 请假的下拉的改变
function QingjiaDep(val) {
  axios.get("/cfg/leave/list", { params: { departmentId: val } }).then((res) => {
    if (res.success) {
      type.value = res.data;
    }
  });
}
// 时间的下拉改变
function timeDep(val) {
  companyId.value = val; //更新企业id
  axios.get("/cfg/atte/item", { params: { departmentId: val } }).then((res) => {
    if (res.success) {
      setTimeForm.value.time.morningStartTime = res.data.morningStartTime;
      setTimeForm.value.time.morningEndTime = res.data.morningEndTime;
      setTimeForm.value.time.afternoonStartTime = res.data.afternoonStartTime;
      setTimeForm.value.time.afternoonEndTime = res.data.afternoonEndTime;
    }
  });
}

// ##弹框中的操作
function confirm() {
  //提交的操作

  if (active.value == 1) {
    setTimeFormRef.value.validate((falg) => {
      if (falg) {
        axios
          .put("/cfg/atte", {
            companyId: companyId.value,
            departmentId: setTimeForm.value.departmentId,
            morningStartTime: setTimeForm.value.time.morningStartTime,
            morningEndTime: setTimeForm.value.time.morningEndTime,
            afternoonStartTime: setTimeForm.value.time.afternoonStartTime,
            afternoonEndTime: setTimeForm.value.time.afternoonEndTime,
          })
          .then((res) => {
            if (res.success) {
              ElMessage.success(res.message);
            } else {
              ElMessage.error(res.message);
            }
          });
      }
    });
  }
  if (active.value == 2) {
    setQingjiaFormRef.value.validate((falg) => {
      if (falg) {
        axios.post("/cfg/leave", [...type.value]).then((res) => {
          if (res.success) {
            ElMessage.success(res.message);
          } else {
            ElMessage.error(res.message);
          }
        });
      }
    });
  }
  if (active.value == 3) {
    koukuanFormRef.value.validate((falg) => {
      if (falg) {
        axios.post("/cfg/deduction", [...koukuanList.value]).then((res) => {
          if (res.success) {
            ElMessage.success(res.message);
          } else {
            ElMessage.error(res.message);
          }
        });
      }
    });
  }
  if (active.value == 4) {
    jiaBanFormRef.value.validate((falg) => {
      if (falg) {
        console.log("tongguo");
        axios
          .put("/cfg/extDuty", {
            departmentId: setJiaBanForm.value.departmentId,
            isClock: extraDutyConfig.value.isClock,
            isCompensationint: extraDutyConfig.value.isCompensationint,
            latestEffectDate: dayOffConfigs.value.latestEffectDate,
            unit: extraDutyConfig.value.unit,
            rules: [...extraDutyRuleList.value],
          })
          .then((res) => {
            if (res.success) {
              ElMessage.success(res.message);
            } else {
              ElMessage.error(res.message);
            }
          });
      }
    });
  }
}
function xiao() {
  shezhiRef.value.close();
}
function shezhi() {
  shezhiRef.value.open();
}

// ##判断路由位置
// 判断路由位置
function panduan() {
  if (route.matched[route.matched.length - 1].path !== "/attendance") {
    isChildView.value = true;
  } else {
    isChildView.value = false;
  }
}
// ##监听路由的变化
watch(route, () => {
  // console.log(route,'路由发生了变化');
  panduan();
});

onMounted(() => {
  getDepartment();
  getList();
  panduan();
  jiaBanDep(1);
  koukuanDep(1);
  QingjiaDep(1);
  timeDep(1);
});

function getDepartment() {
  axios.get("/company/department").then((res) => {
    // console.log(res,'获取到的部门的所有信息');
    if (res.success) {
      departmentList.value = res.data;
    }
  });
}
function getList() {
  let params = {
    deptID: departmentIds.value.join(","),
    page: page.value,
    pageSize: pageSize,
  };
  isListLoading.value = true
  axios
    .get(`/attendances`, {
      params,
    })
    .then((res) => {
      // console.log(res, "考勤列表的信息");
      if (res.success) {
        list.value = res.data.data.rows;
        total.value = res.data.data.total;
        days.value = res.data.data.rows[0].attendanceRecord.map((k) => {
          return {
            date: k.day,
          };
        });
  isListLoading.value = false
      }
    });
}
watchEffect(() => {
  // console.log(page.value,pageSize.value);
  getList();
});
// css in js
</script>

<style scoped long="scss">
.one {
  height: 150px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 100px;

  .left {
    text-align: center;
  }
}
.two {
  min-height: 200px;
  background-color: #ffffff;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  h2 {
    font-size: 20px;
    margin-left: 50px;
  }
  .right {
    width: 85%;
    /* background-color: orange; */
    align-items: center;
    .el-checkbox {
      margin: 15px;
    }
  }
}
.tree {
  margin-top: 30px;
  background-color: #ffffff;
  overflow: hidden;
  box-sizing: border-box;
  .pagination-box{
    margin: 20px auto;
    display: flex;  
    justify-content: center;
    svg{
      vertical-align: middle;
    }
  }
}
.title {
  height: 35px;
  border-bottom: 3px solid #e0e0e0;
  display: flex;
  justify-content: space-around;
  .tab {
    margin-right: 10px;
    cursor: pointer;
    line-height: 35px;
    font-size: 17px;
  }
  .active {
    color: #409eff;
    position: relative;
  }
  .active::after {
    content: "";
    height: 3px;
    width: 60px;
    background-color: #409eff;
    position: absolute;
    bottom: -3px;
    left: 0;
  }
}
.content {
  min-height: 380px;
  padding: 30px;
  overflow: auto;
}
.it {
  /* height: 370px; */
  padding: 10px;
  margin: 10px 0;
  .el-input {
    height: 30px;
  }
  .on {
    margin-left: 10px;
  }
  .tw {
    margin-top: 30px;
    margin-left: 80px;
  }
  .tre {
    margin-top: 30px;
    margin-left: 120px;
  }
}
.it:hover {
  background-color: rgb(245, 247, 250);
}

/* 调整休假的布局位置 */
.q {
  margin-left: 50px;
}
.w {
  margin-left: 105px;
}
.tem{
  cursor: pointer;
}
</style>
